<script lang="ts" setup>
import useStore from '@/store';
import { TabType } from '@/types/global/tab';
import { storeToRefs } from 'pinia';
import { onMounted, reactive, ref } from 'vue';
let { authCatalogs } = storeToRefs(useStore.setting);
defineOptions({ name: 'Module' });
const _icon = (name: string) => {
  return new URL('/src/assets/icons/' + name + '.png', import.meta.url).href;
};
const loading = ref(true);

const modules = ref(null);
const operates = ref(null);
const buttons = ref([{ Icon: 'CirclePlus', Disabled: true }, { Icon: 'Edit' }, { Icon: 'Delete' }]);
const handleNodeClick = data => {
  if (data.Type == 1) {
    loading.value = true;
    getOperates(data.Id);
  }
};
const query = (): void => {
  window.$api.module.query().then(res => {
    modules.value = res.Data;
    loading.value = false;
  });
};
const getModules = (pId: number): void => {
  window.$api.module.getByPId(pId).then(res => {
    modules.value = res.Data;
    loading.value = false;
  });
};
const getOperates = (moduleId: number) => {
  loading.value = false;
};
const handleShortcutClick = shortcut => {
  if (shortcut.Type == 1) {
    loading.value = true;
    getModules(shortcut.Id);
  }
};
onMounted(() => {
  query();
});
</script>

<template>
  <div id="windows" style="height: 100%">
    <windows-container :buttons="buttons">
      <template #mainleft>
        <el-tree
          :data="modules"
          :props="{
            children: 'Children',
            label: 'Name',
          }"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <template #default="scope">
            <div class="custom-node">
              <el-image :src="_icon(scope.data.PId == null ? 'computer' : scope.data.PId == 1 ? 'folder' : scope.data.Icon)" style="width: 20px" fit="contain" />
              <span>{{ scope.node.label }}</span>
            </div>
          </template>
        </el-tree>
      </template>
      <div class="content" v-loading="loading">
        <windows-shortcut-group flexdirection="row" size="50">
          <template v-for="item in operates">
            <windows-shortcut :title="item.Name" :icon="item.Type == 0 ? 'folder' : item.Icon" color="#000" @dblclick="handleShortcutClick(item)"></windows-shortcut>
          </template>
        </windows-shortcut-group>
      </div>
    </windows-container>
  </div>
</template>
<style lang="scss">
#windows {
  user-select: auto;
  .el-tree-node__content {
    margin-bottom: 10px;
  }
}
</style>
<style scoped lang="scss">
.el-tree {
  width: 200px;
  margin-top: 15px;
  font-size: 14px;
}
.custom-node {
  display: flex;
  align-items: center;
  span {
    margin-left: 5px;
  }
}
.content {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 30px;
  box-sizing: border-box;
  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    margin-right: 50px;
    span {
      margin-top: 5px;
    }
  }
}
</style>
